<template>
  <div>
    <div ref="echartsMap" class="map" :style="`height: ${height}`" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import HB from 'echarts/map/json/province/hebei.json'
import shijiazhuang from '@/utils/shijiazhuang.json'
export default {
  name: 'Map',
  data() {
    return {
      shijiazhuang,
      myChart: null // 用来存放图形实例
    }
  },
  height: {
    type: String,
    default() {
      return '240px'
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs['echartsMap'])
    echarts.registerMap('石家庄', shijiazhuang)
    const mapName = '石家庄'
    const data = [
      { name: '桥西区', value: 383 },
      { name: '裕华区', value: 160 },
      { name: '长安区', value: 255 },
      { name: '鹿泉区', value: 57 },
      { name: '新华区', value: 232 },
      { name: '元氏县', value: 44 },
      { name: '赞皇县', value: 15 },
      { name: '灵寿县', value: 61 },
      { name: '平山县', value: 44 },
      { name: '行唐县', value: 15 },
      { name: '晋州市', value: 61 },
      { name: '辛集市', value: 132 },
      { name: '无极县', value: 44 },
      { name: '藁城区', value: 15 },
      { name: '赵县', value: 61 },
      { name: '深泽县', value: 61 },
      { name: '新乐市', value: 44 },
      { name: '正定县', value: 15 },
      { name: '高邑县', value: 61 },
      { name: '栾城区', value: 60 },
      { name: '井陉县', value: 55 },
      { name: '井陉矿区', value: 55 }
    ]
    const geoCoordMap = {}
    /* 获取地图数据*/
    this.myChart.showLoading()
    const mapFeatures = echarts.getMap(mapName).geoJson.features
    this.myChart.hideLoading()
    mapFeatures.forEach(function(v) {
      // 地区名称
      const name = v.properties.name
      // 地区经纬度
      geoCoordMap[name] = v.properties.center
    })
    const max = 500
    const min = 10 // todo
    const maxSize4Pin = 50
    const minSize4Pin = 20

    const convertData = function(data) {
      const res = data.map(d => {
        const geoCoord = geoCoordMap[d.name]
        return {
          name: d.name,
          value: geoCoord.concat(d.value)
        }
      })
      return res
    }
    const options = {
      title: {
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          if (params.name) {
            const toolTiphtml = params.name + ':' + params.data.value
            return toolTiphtml
          }
          return
        }
      },
      visualMap: {
        show: true,
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {
          color: ['#00467F', '#A5CC82'] // 蓝绿
        },
        textStyle: {
          color: '#fff'
        }
      },

      geo: {
        show: true,
        map: mapName,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#028aff',
            borderColor: '#3B5077'
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        }
      },
      series: [
        {
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(data),
          symbolSize: function(val) {
            return val[2] / 10
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#05C3F9'
            }
          }
        },
        {
          type: 'map',
          map: mapName,
          geoIndex: 0,
          aspectScale: 0.75, // 长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#ffffff',
              borderColor: '#3B5077'
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          },
          animation: false,
          data: data
        },
        {
          name: '点',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'pin', // 气泡
          symbolSize: function(val) {
            const a = (maxSize4Pin - minSize4Pin) / (max - min)
            let b = minSize4Pin - a * min
            b = maxSize4Pin - a * max
            return a * val[2] + b
          },
          label: {
            normal: {
              formatter: '{@[2]}',
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 9
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#F62157' // 标志颜色
            }
          },
          zlevel: 6,
          data: convertData(data)
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(
            data
              .sort(function(a, b) {
                return b.value - a.value
              })
              .slice(0, 5)
          ),
          symbolSize: function(val) {
            return val[2] / 25
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: 'yellow',
              shadowBlur: 10,
              shadowColor: 'yellow'
            }
          },
          zlevel: 1
        }
      ]
    }
    // 给实例对象添加配置参数
    this.myChart.setOption(options)
    // 绑定监听事件
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    // 销毁 Echarts 实例
    this.myChart.dispose()
  },
  methods: {
    resizeHandler() {
      // 图形根据容器大小来进行缩放
      this.myChart.resize()
    }
  }
}
</script>

<style scoped lang="scss">
.map{
  height: 510px;
}
</style>
